<template>
	<div id="cj">
		<div class="header">
			<router-link to="/">首页</router-link>
			<span>&gt;</span>
			<span>场景</span>
			<img src="http://pub.szzhangchu.com/web/v4.2/images/ico/menu.png">
		</div>
		<div class="citems">
			<div class="citem" v-for="n in arr">
				<router-link to="/xiawucha">
				<img v-bind:src="n.scene_background" v-lazy="n.scene_background">
				<div class="visor-p">
					<p>#{{n.scene_title}}#</p>
					<P>{{ n.dish_count }}道菜</P>
				</div>
				<div class="visor">
					
				</div>
				</router-link>
			</div>
		</div>
		<div class="more" @click="loadMore()" v-show="isShow">
			还剩下{{num}}个场景
		</div>

	</div>
</template>

<script>
export default{
	data(){
		return {
			arr: [],
			count: 0,	
			isShow: true,
			isHidden: false,
			num: 152
		}
	},
	mounted(){
		fetch("./static/changjing.json").then(function(res){
			return res.json();
		})
		.then((res)=>{
			this.arr = res.data.data;
		})
	},
	methods: {
		loadMore(){	
			console.log(this.arr);
			var url = "";
			if(this.count==0){
				url = "./static/changjing1.json"
			}else if(this.count==1){
				url = "./static/changjing2.json"
			}
			fetch(url).then(function(res){
				return res.json();
			})
			.then((res)=>{	
				for(var i = 0;i<res.data.data.length;i++){
					this.arr.push(res.data.data[i]);
				}
			})
			if(this.num<10){		
				this.isShow  = this.isHidden;		
			}
			this.count++
			this.num -= 9
		}
	}
}
</script>

<style>
#cj{
	font-size: .2rem;
}
.header{
	width: 100%;
	height: 0.8rem;
	position: relative;
	line-height: 0.8rem;
	font-size: .3rem;
	padding: 0 0 0 .2rem;
}
.header img{
	width: 0.7rem;
	position: absolute;
	right: 0
}
.header>a{
	color: black;
}
.citems{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.citem{
	width: 33%;
	height: 2.3rem;
	position: relative;	
	margin: 0 0 .03rem 0;
}
.citems img{
	width: 100%;
	height: 2.3rem;
}
.visor{
	width: 100%;
	height: 2.3rem;
	background-color: rgba(0, 0, 0, 0.4);
	position: absolute;
	left: 0;
	top: 0;
}
.visor-p{
	width: 100%;
	position: absolute;
	bottom: 0;
	z-index: 2;
	color: white;
	font-size: .22rem;
	text-align: center;
}
.more{
	width: 6rem;
	height: .6rem;
	color: #666;
	background-color: #ddd;
	font-size: .3rem;
	line-height: .6rem;
	text-align: center;
	margin: .2rem auto;
	border-radius:25px;
}
</style>